<template>
  <div class="home" style="height: 65px;font-size: 14px;">
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    router
    active-text-color="#ffd04b"
    text-color=" 		#707659"
  >
    <el-menu-item index="/home">
      <span>诗词交流平台</span>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/home">首页</el-menu-item>
    <el-sub-menu index="1" background-color= "#3e3e3e">
      <template #title>推荐</template>
      <el-menu-item index="/home/today">今日一句</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/home/author">作者</el-menu-item>
    <el-sub-menu index="2">
      <template #title>论坛</template>
      <el-menu-item index="/home/active">活动版块</el-menu-item>
      <el-menu-item index="/home/create">创作版块</el-menu-item>
      <el-menu-item index="/home/view">赏析版块</el-menu-item>
      <el-menu-item index="/home/speak">讨论版块</el-menu-item>
    </el-sub-menu>
    <el-button class="button" type="primary"  @click="login()" plain v-if="displaylogin">登录</el-button>
    <el-button class="button" type="primary"  @click="user()" plain v-if="displayuser">个人中心</el-button>
  </el-menu>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { ref } from 'vue'

let displaylogin = ref(true)
let displayuser = ref(true)

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const login = async () =>{
  displayuser.value = true;
  displaylogin.value = false;
  router.push({path: '/login'});
}

const user = () =>{
  router.push({path: '/home/userinfo'});
}
</script>

<style lang="scss" scoped>
  .flex-grow {
  flex-grow: 1;
}

.el-menu {
            border-right: none;
            background-color: #D7DAC8;
            
        }
.el-sub-menu {
              background-color: #D7DAC8;
            }
</style>
